<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>权限列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/myhttp.js"></script>
    <script src="/js/echarts.min.js"></script>
</head>
<body>
<div id="app">
    <p>商品销售TOP3</p>
    <div style="width: 100%;display: flex">
        <div style="width: 70%">
            <el-table border :data="show_view" style="width:100%">
                <el-table-column label="商品ID" prop="uid" ></el-table-column>
                <el-table-column label="图片" prop="image">
                    <template slot-scope="scope">
                        <img :src="scope.row.goods.imgid" alt="Product Image" style="width: 50px; height: 50px;">
                    </template>
                </el-table-column>
                <el-table-column label="商品销售额" prop="saleprices"></el-table-column>
                <el-table-column label="商品销量" prop="counts"></el-table-column>
            </el-table>
        </div>
        <div style="width: 30%">
            <div id="charts1" style="width: 100%;height: 50vh"></div>
        </div>
    </div>
    <p>收入曲线</p>
    <div id="charts2" style="width: 100%;height: 50vh"></div>
    <p>销量曲线</p>
    <div id="charts3" style="width: 100%;height: 50vh"></div>



</div>
</body>
<script>
    new Vue({
        el:"#app",
        data: {
            dataList:[],
            goodsList:[],
            Top3:[],
            show_view:[]
        },
        methods:{
            GetGoods(id){
                for (let i =0;i<this.goodsList.length;i++){
                    if (this.goodsList[i].uid == id){
                        return this.goodsList[i]
                    }
                }
            },
            GetTop(times,maps){
                let arrays = []
                for (let j = 0;j<times;j++){
                    let tops = 0
                    let seltops = ""
                    let objs = Array.from(maps.keys())
                    console.log(objs)
                    for (let i = 0;i<objs.length;i++){
                        if (maps.get(objs[i]).saleprices > tops){
                            if (!arrays.includes(objs[i])){
                                tops = maps.get(objs[i]).saleprices
                                seltops = objs[i]
                            }
                        }
                    }
                    arrays.push(seltops)
                }
                let show_view = []
                for (let i =0;i<arrays.length;i++){
                    let obj = {}
                    obj.uid = arrays[i]
                    obj.goods = this.GetGoods(arrays[i])
                    obj.saleprices = maps.get(arrays[i]).saleprices
                    obj.counts = maps.get(arrays[i]).counts
                    show_view.push(obj)
                }
                this.show_view = show_view
                let echart_data = []
                for (let i = 0;i<show_view.length;i++){
                    let obj = {}
                    obj.value = show_view[i].saleprices
                    obj.name = show_view[i].goods.goodsname
                    echart_data.push(obj)
                }

                var myChart = echarts.init(document.getElementById('charts1'));
                let option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '商品名',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: echart_data

                        }
                    ]
                };
                myChart.setOption(option);
                console.log(this.show_view)
            },
            MakeC2(){
                let maps = new Map()
                for (let i =0;i<this.dataList.length;i++){
                    if (maps.has(this.dataList[i].times)){
                        let obj = maps.get(this.dataList[i].times)
                        obj.counts += this.dataList[i].counts
                        obj.saleprices += this.dataList[i].prices
                        maps.set(this.dataList[i].times,obj)
                    }else{
                        let obj = {}
                        obj.counts = this.dataList[i].counts
                        obj.saleprices = this.dataList[i].prices
                        maps.set(this.dataList[i].times,obj)
                    }
                }
                console.log(maps)
                let keys = Array.from(maps.keys())
                let data1 = []
                let data2 = []
                for (let i =0;i<keys.length;i++){
                    data1.push(maps.get(keys[i]).saleprices)
                    data2.push(maps.get(keys[i]).counts)
                }
                var myChart1 = echarts.init(document.getElementById('charts2'));
                var myChart2 = echarts.init(document.getElementById('charts3'));
                let option1 = {
                    xAxis: {
                        type: 'category',
                        data: keys
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data1,
                            type: 'line',
                            smooth: true
                        }
                    ]
                };
                myChart1.setOption(option1);

                let option2 = {
                    xAxis: {
                        type: 'category',
                        data: keys
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data2,
                            type: 'line',
                            smooth: true
                        }
                    ]
                };
                myChart2.setOption(option2);
            },
            MakeEcharts(){
                let maps = new Map();
                for (let i =0;i<this.dataList.length;i++){
                    if (maps.has(this.dataList[i].goodsid)){
                        let obj = maps.get(this.dataList[i].goodsid)
                        obj.counts+=this.dataList[i].counts
                        obj.saleprices+=this.dataList[i].prices
                        maps.set(this.dataList[i].goodsid,obj)
                    }else{
                        let obj = { counts:this.dataList[i].counts,saleprices:this.dataList[i].prices}
                        maps.set(this.dataList[i].goodsid,obj)
                    }
                }
                let objs = Array.from(maps.keys())
                for (let i =0;i<objs.length;i++){
                    let obj = maps.get(objs[i])
                    obj.goods = this.GetGoods(objs[i])
                }
                this.GetTop(3,maps)
                console.log(maps)
                this.MakeC2()
            },
            QueryGoods(){
                let that=this
                myhttps("/Goods/getAll",{}).then(res=>{
                    console.log(res)
                    for (let i =0;i<res.body.length;i++){
                        res.body[i].imgid = "http://localhost:8080/images/"+res.body[i].imgid
                    }
                    that.goodsList = res.body
                    that.MakeEcharts()
                }).catch(res=>{
                    that.$message.error("错误："+res.msg)
                })
            },
            QueryData(){
                let that = this
                myhttps("/Orders/queryAllOrder",{}).then(res=>{
                    that.dataList = res.body
                    that.QueryGoods()
                }).catch(res=>{
                    that.$message.error("错误："+res.msg)
                })

            }
        },
        mounted(){
            this.QueryData()
        }
    })

</script>
</html>
